<!DOCTYPE html>
<html lang="">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="theme-color" content="#317EFB" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=0" name="viewport">
<meta name="keywords" content="">
<meta property="og:type" content="article">
<meta property="og:title" content="hexo安装篇for mac">
<meta property="og:url" content="https://yysff.gitee.io/ye-blog/2020/09/25/%E5%9F%BA%E4%BA%8Ehexo%E6%A1%86%E6%9E%B6%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200306180056727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODQ4NzYz,size_16,color_FFFFFF,t_70">
<meta property="article:published_time" content="2020-09-25T10:31:59.000Z">
<meta property="article:modified_time" content="2022-06-07T12:37:12.540Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/20200306180056727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODQ4NzYz,size_16,color_FFFFFF,t_70">

<title>
    hexo安装篇for mac
</title>




<link rel="preload" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.css">


<link rel="stylesheet" href="/ye-blog/css/plugins/bootstrap.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/locomotive-scroll.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/swiper.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/fancybox.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/font-awesome.min.css">


<!-- variable -->
<script>window.TYPED_TEXT=[
  "Web Developer"
]</script>
<script>window.FAVICON={
  "icon16": null,
  "icon32": null,
  "appleTouchIcon": null,
  "webmanifest": null,
  "visibilitychange": false,
  "hidden": null,
  "showText": "(/≧▽≦/)咦！又好了！",
  "hideText": "(●—●)喔哟，崩溃啦！"
}</script>
<script>window.HTMEM_VERSION='1.0.2'</script>
<link data-theme-type="style-light" rel="stylesheet" href="/ye-blog/css/style-light.css?v=1.0.2" id="trm-switch-style">
<link data-theme-type="style-dark" rel="stylesheet" href="/ye-blog/css/style-dark.css?v=1.0.2" id="trm-switch-style">

<!-- theme css -->
<script>
    let themeMode = localStorage.getItem('theme-mode') === 'style-dark' ? 'style-light' : 'style-dark';
    let linkdom = document.querySelector('[data-theme-type='+themeMode+']');
    if(linkdom) linkdom.remove();
</script>

<!-- Site Analytics -->
 
<meta name="generator" content="Hexo 5.4.2"></head>

<body>

  <!-- app wrapper -->
  <div class="trm-app-frame">

    <!-- page preloader -->
    <div class="trm-preloader">
    <div class="trm-holder">
        <div class="preloader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
    <!-- page preloader end -->

    <!-- change mode preloader -->
    <div class="trm-mode-swich-animation-frame">
    <div class="trm-mode-swich-animation"><i class="far fa-sun"></i>
        <div class="trm-horizon"></div>
        <i class="far fa-moon"></i>
    </div>
</div>
    <!-- change mode preloader end -->

      <!-- scroll container -->
      <div id="trm-dynamic-content" class="trm-swup-animation">
        <div id="trm-scroll-container" class="trm-scroll-container" data-scroll-container style="opacity: 0">
          <div data-scroll-section id="content" class="trm-scroll-section">
            <!-- top bar -->
            <div class="trm-top-bar" data-scroll data-scroll-sticky data-scroll-target="#content" data-scroll-offset="-10">
	<div class="container">
		<div class="trm-left-side">
			<!-- logo -->
			<a href="/ye-blog/" class="trm-logo-frame trm-anima-link">
				<img src="/ye-blog/logo.png" alt="logo">
				<div class="trm-logo-text">
					Theme
					<span>Async</span>
				</div>
			</a>
			<!-- logo end -->
		</div>
		<div class="trm-right-side">

			<!-- menu -->
			<div class="trm-menu">
				<nav>
					<ul>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/">
								首页
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/archives/">
								归档
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/links/">
								友链
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/about/">
								关于
							</a>
							
						</li>
						
					</ul>
				</nav>
			</div>
			<!-- menu end -->

			<!-- mode switcher place -->
			<div class="trm-mode-switcher-place"></div>
			<!-- mode switcher place end -->

		</div>
		<div class="trm-menu-btn">
			<span></span>
		</div>
	</div>
</div>
            <!-- top bar end -->

            <!-- body -->
            <div class="trm-content-start">

    <!-- banner -->
    <div class="trm-banner" data-scroll data-scroll-direction="vertical">
    <!-- banner cover -->
    <img src="https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c" alt="banner" class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-3">
    <!-- banner cover end -->

    <!-- banner slideshow cover-->
    <!-- <div class="swiper-container trm-slideshow" data-scroll data-scroll-direction="vertical" data-scroll-speed="-4">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/img/blog/b1.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
            <div class="swiper-slide"><img src="/img/blog/b2.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
            <div class="swiper-slide"><img src="/img/blog/b3.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
        </div>
    </div> -->
    <!-- banner slideshow cover end -->

    <!-- banner video cover -->
    <!-- <video autoplay="autoplay" loop muted playsinline webkit-playinginline class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-4">
        <source src="img/banner.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="img/banner.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="img/banner.ogg" type='video/ogg; codecs="theora, vorbis"'>
        Your browser does not support HTML5 video.
    </video> -->
    <!-- banner video cover end -->

    <!-- banner cover end -->

    <!-- banner content -->
    <div class="trm-banner-content trm-overlay">
        <div class="container" data-scroll data-scroll-direction="vertical" data-scroll-speed="0">
            <div class="row">
                <div class="col-lg-4"></div>
                <div class="col-lg-8">

                    <!-- banner title -->
                    <div class="trm-banner-text">
                        <div class="trm-label trm-mb-20">
                            NEWS LETTER
                        </div>
                        <h1 class="trm-mb-30 trm-hsmb-font">
                            hexo安装篇for mac
                        </h1>

                        
                            <ul class="trm-breadcrumbs trm-label">
                                <li>
                                    <a href="/ye-blog/" class="trm-anima-link">Home</a>
                                </li>
                                <li>
                                    <span>
                                        2020
                                    </span
                                ></li>
                            </ul>
                        
                    </div>
                    <!-- banner title end -->

                    <!-- scroll hint -->
                    <a href="#about-triger" data-scroll-to="#about-triger" data-scroll-offset="-130" class="trm-scroll-hint-frame">
                        <div class="trm-scroll-hint"></div>
                        <span class="trm-label">Scroll down</span>
                    </a>
                    <!-- scroll hint end -->

                </div>
            </div>
        </div>
    </div>
    <!-- banner content end -->
</div>
    <!-- banner end -->

    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <!-- main card -->
                <div class="trm-main-card-frame trm-sidebar">
    <div class="trm-main-card" data-scroll data-scroll-repeat data-scroll-sticky data-scroll-target="#content" data-scroll-offset="60">
        <!-- card header -->
        <div class="trm-mc-header">
            <div class="trm-avatar-frame trm-mb-20"><img class="trm-avatar" src="博主头像信息" alt="Avatar"> </div>
            <h5 class="trm-name trm-mb-15">
                ThemeAsync
            </h5>
            <div class="trm-label">
                I`m
                <span class="trm-typed-text">
                    <!-- Words for theme.user.typedText -->
                </span>
            </div>
        </div>
        <!-- card header end -->
        <div class="trm-divider trm-mb-40 trm-mt-40"></div>
        <!-- sidebar social -->
        <div class="trm-social">
            
                <a href="https://github.com" rel="nofollow" target="_blank">
                    <i class="fab fa-github"></i>
                </a>
            
                <a href="https://gitee.com" rel="nofollow" target="_blank">
                    <i class="iconfont cg-gitee"></i>
                </a>
            
                <a href="https://weibo.com/" rel="nofollow" target="_blank">
                    <i class="iconfont cg-weibo"></i>
                </a>
            
        </div>
        <!-- sidebar social end -->
        <div class="trm-divider trm-mb-40 trm-mt-40"></div>
        <!-- info -->
        <ul class="trm-table trm-mb-20">
            
                <li>
                    <div class="trm-label">
                        Residence:
                    </div>
                    <div class="trm-label trm-label-light">
                        Mars
                    </div>
                </li>
            
                <li>
                    <div class="trm-label">
                        City:
                    </div>
                    <div class="trm-label trm-label-light">
                        WuHan
                    </div>
                </li>
            
                <li>
                    <div class="trm-label">
                        Age:
                    </div>
                    <div class="trm-label trm-label-light">
                        18
                    </div>
                </li>
            
        </ul>
        
    </div>
</div>
                <!-- main card end -->
            </div>
            <div class="col-lg-8">
                <!-- content -->
                <div class="trm-content" id="trm-content">
                    <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>
                    
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-calendar-alt trm-icon"></i><br>
                                09/25
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-clock trm-icon"></i><br>
                                06:31
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-user trm-icon"></i><br>
                                ThemeAsync
                            </div>
                        </div>
                    </div>

                    <article class="trm-card trm-publication">
                        <hr>
<span id="more"></span>

<p>Hexo 是一款基于 Node.js 的极简风格静态博客框架，因为其依赖少，安装简单，因此非常适合对前端感兴趣的且具有 diy 精神的新手进行练习。并且 Hexo 的创建者是台湾人，对中文的支持很友好，可以直接进入 <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">官网</a> 查看相关文档。</p>
<p>Hexo 使用<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/191d1e21f7ed/">Markdown</a>解析文章，方便后期随时更换框架。对于学生党或者兴趣爱好者来说可以省去服务器的费用直接部署到 <a target="_blank" rel="noopener" href="https://github.com/">GitHup</a> 或者 <a href="gitee.com">Gitee</a> 上是非常 nice 的一点。</p>
<hr>
<h1 id="第一步：配置环境"><a href="#第一步：配置环境" class="headerlink" title="第一步：配置环境"></a>第一步：配置环境</h1><p>环境可以理解为运行或修改 hexo 的必要程序，配置环境即安装运行程序。mac 需要打开终端，键入 <code>sudo su</code> 后输入密码以登陆 root 用户，密码输入后显示 <strong>sh－3.2#</strong> 即为 root 完成。</p>
<p><img src="https://img-blog.csdnimg.cn/20200306180056727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODQ4NzYz,size_16,color_FFFFFF,t_70" alt="mac登陆root用户"></p>
<h3 id="1-node-js-安装"><a href="#1-node-js-安装" class="headerlink" title="1.node.js 安装"></a>1.node.js 安装</h3><p>下载地址：<a target="_blank" rel="noopener" href="https://nodejs.org/en/">https://nodejs.org/en/</a>，下载完该安装包，直接进行安装即可。</p>
<p>查看安装版本，确保版本可以正常使用和运行 hexo；<br>在终端中输入<code> node -v</code>查看 node.js 版本；<br>在终端中输入<code> npm -v</code>查看 npm 版本；<br>npm 不需要单独安装，在我们安装 Node.js 环境时，npm 也就安装了。</p>
<h3 id="2-c-npm-安装"><a href="#2-c-npm-安装" class="headerlink" title="2.c-npm 安装"></a>2.c-npm 安装</h3><blockquote>
<p>hexo 的安装时需要使用包管理器 中国版的npm，但是由于国内镜像源速度很慢，所以在安装前使用墙软件或者安装 中国版的npm。</p>
</blockquote>
<blockquote>
<p>在终端中输入：npm install -g cnpm –registry=<a target="_blank" rel="noopener" href="https://registry.cnpm.taobao.org/">https://registry.cnpm.taobao.org</a></p>
</blockquote>
<blockquote>
<p>输入cnpm -v查看 中国版的npm 版本，没有报错即安装完成。</p>
</blockquote>
<hr>
<h1 id="第二步：安装-hexo"><a href="#第二步：安装-hexo" class="headerlink" title="第二步：安装 hexo"></a>第二步：安装 hexo</h1><p>在硬盘中建立相关文件夹，再在终端中输入<code> cd 博客文件夹名称/</code>进入博客文件夹，起始位置在首页 Users/中，cd 后跟文件夹路径，返回上一层为<code> cd ../</code>。</p>
<p>终端输入<code> su</code>切换管理员权限，再利用包管理器 cnpm 全局安装 hexo 博客框架；<br>终端输入：<code> cnpm install -g hexo-cli</code>；</p>
<p>输入<code> hexo -v</code>查看 cnpm 版本，没有报错即安装完成。</p>
<hr>
<h1 id="第三步：搭建-hexo-博客以及更换主题"><a href="#第三步：搭建-hexo-博客以及更换主题" class="headerlink" title="第三步：搭建 hexo 博客以及更换主题"></a>第三步：搭建 hexo 博客以及更换主题</h1><h3 id="1-初始化-Hexo"><a href="#1-初始化-Hexo" class="headerlink" title="1.初始化 Hexo"></a>1.初始化 Hexo</h3><p>打开你的 blog 目录，例如 Blog，并在该目录中进行 Hexo 的初始化：<br>博客初始化<code> hexo init Blog</code><br>进入博客目录 <code> cd Blog/</code><br>安装依赖包 <code> npm install</code></p>
<p>完成安装后，终端中输入<code>hexo g</code>生成静态博客页面，然后就可以在本地进行预览啦，在终端中输入<code>hexo s</code>生成本地地址，根据命令行提示，打开 http://localhost:4000/ 即可看到默认主题的默认页面了。</p>
<h3 id="2-Hexo-主题更换"><a href="#2-Hexo-主题更换" class="headerlink" title="2.Hexo 主题更换"></a>2.Hexo 主题更换</h3><p>Hexo 具有高定制的主题效果，可以直接从 Hexo 的<a target="_blank" rel="noopener" href="https://hexo.io/themes/">主题库</a>中选择合适的主题进行下载。<br>下载解压完成后，修改 hexo 配置文件<code>_config.yml</code>中的主题标签：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Extensions ##主题设置</span><br><span class="line">Plugins: https://hexo.io/plugins/</span><br><span class="line">Themes: https://hexo.io/themes/</span><br><span class="line">theme: 主题名称</span><br></pre></td></tr></table></figure>

<p>完成修改后<code>hexo clean</code>清理一下静态文件，再次<code>hexo g</code>生成文件，重新<code>hexo s</code>启动即可。</p>
<hr>
<h1 id="第四步：博客文章建立"><a href="#第四步：博客文章建立" class="headerlink" title="第四步：博客文章建立"></a>第四步：博客文章建立</h1><p>打开建立的博客文件夹，进入<code>user/blog/source/_posts</code>文件夹建立博客文章或者修改博客内容，博客文章需要 markdown 格式。</p>
<p>Markdown 是一种纯文本格式的标记语言，具体语法可参考<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/191d1e21f7ed">Markdown 基本语法</a>,也可以通过<a target="_blank" rel="noopener" href="https://www.bejson.com/convert/ueditor2markdown/">在线富文本转化</a>。</p>
<hr>

                    </article>

                    <!-- blog -->
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- title -->
                            <h5 class="trm-mb-40 trm-title-with-divider">
                                Other Articles
                                <span data-number="02"></span>
                            </h5>
                        </div>
                        
                            <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/ye-blog/2020/10/10/html%E6%80%BB%E7%BB%93/" class="trm-cover-frame trm-anima-link">
            <img src="/ye-blog/img/block.jpg" alt="cover">
        </a>
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" #.">
                    unclassified
                </a>
            </div>
            <h5>
                <a href="/ye-blog/2020/10/10/html%E6%80%BB%E7%BB%93/" class="trm-anima-link">
                    HTML常用标签
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>
                    10/10
                </li>
                <li>
                    09:06
                </li>
                <li>
                    271
                </li>
            </ul>
        </div>
    </div>
</div>
                        
                        
                    </div>
                    <!-- blog end -->

                    

                    <div class="trm-divider trm-mb-40"></div>

                    <!-- footer -->
                    <footer class="trm-scroll-animation" data-scroll data-scroll-offset="50">
    <div class="trm-label">
        ©  2022- 2022 ·
        <span class="trm-accent-color">
            ThemeAsync
        </span>
    </div>
    <div class="trm-label">
        The blog has been lovely to run:
        <span id="since" class="trm-accent-color"></span>
        day
    </div>
</footer>
<script>
    function show_date_time () {
        BirthDay = new Date("04/10/2022 17:00:00");
        today = new Date();
        timeold = (today.getTime() - BirthDay.getTime());
        msPerDay = 24 * 60 * 60 * 1000
        day = Math.floor(timeold / msPerDay)
        since.innerHTML = day
    }
    show_date_time()
</script>
                    <!-- footer end -->
                </div>
                <!-- content end -->
            </div>
        </div>
    </div>
</div>


    
  
  
            <!-- body end -->
          </div>
        </div>
      </div>
      <!-- scroll container end -->

      <!-- mode switcher -->
      <div class="trm-hidden-switcher">
        <div class="trm-mode-switcher"><i class="far fa-sun"></i>
          <input class="tgl tgl-light" id="trm-swich" type="checkbox">
          <label class="trm-swich" for="trm-swich"></label>
          <i class="far fa-moon"></i>
        </div>
      </div>
      <!-- mode switcher end -->

  </div>
  <!-- app wrapper end -->

  
<script src="/ye-blog/js/plugins/jquery.min.js"></script>
<script src="/ye-blog/js/plugins/swup.min.js"></script>
<script src="/ye-blog/js/plugins/locomotive-scroll.js"></script>
<script src="/ye-blog/js/plugins/typing.js"></script>
<script src="/ye-blog/js/plugins/fancybox.min.js"></script>
<script src="/ye-blog/js/plugins/swiper.min.js"></script>


<!-- 评论插件 -->


<!-- Service Worker -->


<script src="/ye-blog/js/main.js?v=1.0.2"></script>


</body>

</html>